{{#contentFor "Scripts"}}
<script type="text/javascript" src="/Scripts/juicer-min.js"></script>
<script type="text/javascript">
    $(function () {
        getProcessList('{{dbIndex}}', '{{db.type}}');

        getStatus('{{dbIndex}}', '{{db.type}}');

        $('#ddlServer').change(function () {
            var server = $(this).find('option:selected');

            getProcessList(server.val(), server.attr('data-type'));
            getStatus(server.val(), server.attr('data-type'));

            $('#lblIp').html(server.attr('data-ip'));
        });
    });

    function getProcessList(dbIndex, dbType) {
        if (dbIndex == undefined || dbIndex == null) {
            dbIndex = $('#ddlServer').find('option:selected').val();
        }

        $('#bodyProcessList').html(`<tr><td colspan="10" class="text-danger">正在获取执行进程...</td></tr>`);

        $.ajax({
            url: `/api/${dbType}/${dbIndex}/processlist`,
            type: 'POST',
            dataType: 'json',
            success: function (rs) {
                if (!rs.success) {
                    $('#bodyProcessList').html(`<tr><td colspan="10" class="text-danger">${rs.message}</td></tr>`);
                } else {
                    $('#bodyProcessList').html('');
                    $('#bodyProcessList').html(juicer($('#tplProcessList').html(), { dbIndex: dbIndex, list: rs.datas }));
                }
            }
        });
    }

    function getStatus(dbIndex, dbType) {
        if (dbIndex == undefined || dbIndex == null) {
            dbIndex = $('#ddlServer').find('option:selected').val();
        }

        $('#tbodyStatus').html('<tr><td colspan="5">MySQL服务器状态查询中...</td></tr>');

        $.ajax({
            method: 'POST',
            url: `/api/${dbType}/${dbIndex}/status`,
            dataType: 'json'
        }).then(rs => {
            if (!rs.success) {
                $('#tbodyStatus').html(`<tr><td colspan="5">${rs.message}</td></tr>`);
            }
            else {
                $('#tbodyStatus').html('');
                $('#tbodyStatus').html(juicer($('#tplStatus').html(), { dbIndex: dbIndex, list: rs.datas }));
            }
        });
    }

    function OnAbortProcess(element, dbIndex, processId) {
        layer.confirm('是否确定终止该进程？', function (lindex) {
            $.ajax({
                url: `/api/db/${dbIndex}/killprocess`,
                type: 'POST',
                data: {
                    processId: processId
                },
                dataType: 'json',
                success: function (rs) {
                    if (!rs.success) {
                        layer.msg(rs.message);
                    } else {
                        layer.msg(rs.text);
                        $(element).parents('tr').remove();
                    }
                }
            });

            layer.close(lindex);
        });
    }

    function OnAbortAllProcess() {
        var dbIndex = $('#ddlServer > option:selected').val();
        var processes = $('[data-process-id]').map(function () {
            return $(this).attr('data-process-id');
        });
        var ids = Array.prototype.join.apply(processes);

        if (!ids) {
            layer.msg('没有需要终止的进程！');

            return false;
        }

        layer.confirm('是否终止所有进程？', function () {
            $.ajax({
                url: `/api/db/${dbIndex}/killprocess`,
                type: 'POST',
                data: {
                    processId: ids
                },
                dataType: 'json',
                success: function (rs) {
                    if (rs.msg) {
                        layer.msg(JSON.stringify(rs.msg), { time: 4000 });
                    } else {
                        layer.msg(rs.text);
                    }

                    getProcessList(dbIndex);
                }
            });
        });
    }
    </script>
    <script id="tplProcessList" type="text/template">
        {@each list as item, index}
        <tr>
            <td class="text-center" style="width:65px;">${ parseInt(index)+1}</td>
            <td>${item.Id}</td>
            <td>${item.User}</td>
            <td>${item.Host}</td>
            <td>${item.db}</td>
            <td>${item.Command}</td>
            <td>${item.Time}</td>
            <td>${item.State}</td>
            <td>${item.Info}</td>
            <td>
                {@if item.CanKill}
                <button class="btn btn-sm btn-danger" data-process-id="${item.Id}" onclick="OnAbortProcess(this, ${dbIndex} , ${item.Id})">
                    <i class="bi bi-trash"></i> 终止</button>
                {@/if}
            </td>
        </tr>
        {@/each}
    </script>

    <script id="tplStatus" type="text/template">
         {@each list as item, index}
         <tr>
           <td class="text-center">${ parseInt(index) + 1 }</td>
           <td>${item.text}</td>
           <td>${item.Variable_name}</td>
           <td>${item.Value}</td>
           <td>${item.describe}</td>
         </tr>
        {@/each}
    </script>
{{/contentFor}}
<div class="card card-danger">
    <div calss="card-header" style="padding:4px 15px;">
        <div class="row">
            <div class="col input-group">
                <label class="input-group-text">数据库服务器：</label>
                <select id="ddlServer" class="form-select" style="width:200px;" {{dbIndex}}>
                    {{#each dbs}}
                    <option value="{{@index}}" data-ip="{{ip}}" data-type="{{type}}" {{ selected @index }}>{{name}}</option>
                    {{/each}}
                </select>
            </div>
            <span class="col input-group">
                <b class="input-group-text">数据库地址：</b>
                <lable id="lblIp" class="form-control">{{db.ip }}</lable>
            </span>
        </div>
    </div>
</div>
<div class="card card-primary">
    <div class="card-header has-button">
        <span class="pull-left">数据库执行进程</span>
        <span class="pull-right">
            <div class="btn-group">
                <button class="btn btn-danger" onclick="OnAbortAllProcess()">
                    <i class="bi bi-trash"></i> 终止所有
                </button>
                <button class="btn btn-primary" onclick="getProcessList();">
                    <i class="bi bi-arrow-repeat"></i> 刷新
                </button>
            </div>
        </span>
    </div>
    <div class="card-body" style="max-height:300px; overflow-y:auto;">
        <table id="dgProcessList" class="table table-bordered table-hover">
            <thead>
                <tr class="table-primary">
                    <td class="text-center" style="width:65px">序号</td>
                    <td>进程ID</td>
                    <td>用户</td>
                    <td>请求地址</td>
                    <td>数据库</td>
                    <td>命令</td>
                    <td>执行时间(秒)</td>
                    <td>状态</td>
                    <td>信息</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody id="bodyProcessList"></tbody>
        </table>
    </div>
</div>
<div class="card card-primary">
    <div class="card-header">数据库状态详情</div>
    <div class="card-body" style="max-height:240px; overflow:auto;">
        <table id="tbStatus" class="table table-bordered table-hover">
            <thead>
                <tr class="table-primary">
                    <td class="text-center" style="white-space: nowrap;" width="70px;">序号</td>
                    <td>名称</td>
                    <td>变量</td>
                    <td>值</td>
                    <td>变量详情</td>
                </tr>
            </thead>
            <tbody id="tbodyStatus"></tbody>
        </table>
    </div>
</div>